<template>
    <Page class="basic company">
        <template #header>
            <el-input v-model="queryForm.loginUser" placeholder="请输入用户姓名" />
            <el-input v-model="queryForm.productNo" placeholder="请输入商品编码" />
            <el-input v-model="queryForm.productName" placeholder="请输入商品名称" />
            <EdSelect v-model="queryForm.operation" :selectParams="selectOperateType"></EdSelect>
            <!-- <EdDateTimeRange ref="timeRange" @emit-echo-time-range="emitEchoTimeDate($event, 'pickerTime')"></EdDateTimeRange> -->
            <EdDateTimePickerRange v-model="queryForm.pickerTime"  @emit-echo-time-range="emitEchoTimeDate($event, 'pickerTime')" :pickerParams="pickerRangeParams"></EdDateTimePickerRange>
            <el-button class="ed-button ed_black-bottom" @click="search()"><svg-icon class="svg-middle" icon-class="search-svg"/>查 询</el-button>
            <el-button class="ed-button ed_white_bottom" @click="reset()"><svg-icon icon-class="reset-svg"/>重 置</el-button>
        </template>
        <PageCard title="操作日志列表">
            <template #actions>
                <!-- <el-button class="ed-button ed_black-bottom ed-button36" @click="batchHandle()" v-has="'shopping:productPool:batchHandle'"><svg-icon icon-class="batch-handle-svg"/>批量处理</el-button> -->
            </template>
            <ApiTable :api="tableApi" ref="table" :params="queryForm">
                <el-table-column type="index" width="80" label="序号"></el-table-column>
                <!-- <el-table-column width="80" prop="id" label="序号"></el-table-column> -->
                <el-table-column :show-overflow-tooltip="true" prop="loginUser" label="操作用户" :formatter="formatter"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="loginAccount" label="登录账号" :formatter="formatter"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="updateTime" label="操作时间" :formatter="formatter"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="operation" label="操作类型">
                    <template slot-scope="scope">
                        <span>{{returnName(scope.row['operation'], selectOperateType.options) || scope.row['operation'] || '-'}}</span>
                    </template>
                </el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="productNo" label="商品编码" :formatter="formatter"></el-table-column>
                <el-table-column :show-overflow-tooltip="true" prop="productName" label="商品名称" :formatter="formatter"></el-table-column>
                <el-table-column width="250" :show-overflow-tooltip="true" prop="" label="操作">
                     <template slot-scope="scope">
                        <el-button class="ed-table-bottom ed_see_border" v-has="'shopping:operateLog:detail'" @click="see(scope.row)">查看</el-button>
                    </template>
                </el-table-column>
            </ApiTable>
        </PageCard>
        <EdDialog :width="'860px'" :title="'操作详情'" ref="infoDialog" class="infoDialog" :showSubmitBtn="false" :showCloseBtn="false" v-if="infoVisible" @close-dialog="infoClose" @save-dialog="infoSave">
           <div class="content">
                <div class="title">
                    <span class="update_user">操作用户：{{infoData['loginUser']||'-'}}</span>
                    <span class="update_user">登录账号：{{infoData['loginAccount']||'-'}}</span>
                    <span class="update_time">操作时间：{{infoData['updateTime']||'-'}}</span>
                </div>
                <div class="table_box">
                    <el-row class="h_48 boerder_b row_first f_color_1">
                        <el-col :span="6" class="boerder_r">修改项</el-col>
                        <el-col :span="9" class="boerder_r">修改前</el-col>
                        <el-col :span="9">修改后</el-col>
                    </el-row>
                    <el-row class="h_48 boerder_b" style="min-height: 70px">
                        <el-col :span="6" class="boerder_r f_color_1">商品名称</el-col>
                        <el-col :span="9" class="boerder_r f_color_2">{{infoData['updateBefore']&&infoData['updateBefore']['productName'] || '-'}}</el-col>
                        <el-col :span="9" class="f_color_2">{{infoData['updateAfter']&&infoData['updateAfter']['productName'] || '-'}}</el-col>
                    </el-row>
                    <el-row class="h_48 boerder_b">
                        <el-col :span="6" class="boerder_r f_color_1">商品类别</el-col>
                        <!-- <el-col :span="9" class="boerder_r f_color_2">{{infoData['updateBefore']&&infoData['updateBefore']['categoryId']&&returnName(infoData['updateBefore']['categoryId'], selectGoodsType.options, 'code', 'categoryName') || infoData['updateBefore']['categoryId'] || '-'}}</el-col>
                        <el-col :span="9" class="f_color_2">{{infoData['updateAfter']&&infoData['updateAfter']['categoryId']&&returnName(infoData['updateAfter']['categoryId'], selectGoodsType.options, 'code', 'categoryName') || infoData['updateAfter']['categoryId'] || '-'}}</el-col> -->
                        <el-col :span="9" class="boerder_r f_color_2">{{infoData['updateBefore']&&infoData['updateBefore']['categoryName'] || '-'}}</el-col>
                        <el-col :span="9" class="f_color_2">{{infoData['updateAfter']&&infoData['updateAfter']['categoryName'] || '-'}}</el-col>
                    </el-row>
                    <el-row class="h_48 boerder_b">
                        <el-col :span="6" class="boerder_r f_color_1">商品来源</el-col>
                        <el-col :span="9" class="boerder_r f_color_2">{{infoData['updateBefore']&&returnName(infoData['updateBefore']['productSource'], selectSource.options) || infoData['updateBefore']['productSource'] || '-'}}</el-col>
                        <el-col :span="9" class="f_color_2">{{infoData['updateAfter']&&returnName(infoData['updateAfter']['productSource'], selectSource.options) || infoData['updateAfter']['productSource'] || '-'}}</el-col>
                    </el-row>
                    <el-row class="h_48 boerder_b">
                        <el-col :span="6" class="boerder_r f_color_1">产品编号</el-col>
                        <el-col :span="9" class="boerder_r f_color_2">{{infoData['updateBefore']&&infoData['updateBefore']['productNumber'] || '-'}}</el-col>
                        <el-col :span="9" class="f_color_2">{{infoData['updateAfter']&&infoData['updateAfter']['productNumber'] || '-'}}</el-col>
                    </el-row>
                    <el-row class="h_48 boerder_b">
                        <el-col :span="6" class="boerder_r f_color_1">商品限价</el-col>
                        <el-col :span="9" class="boerder_r f_color_2">{{infoData['updateBefore']&&infoData['updateBefore']['productPrice'] || '-'}}</el-col>
                        <el-col :span="9" class="f_color_2">{{infoData['updateAfter']&&infoData['updateAfter']['productPrice'] || '-'}}</el-col>
                    </el-row>
                    <el-row class="h_48 boerder_b">
                        <el-col :span="6" class="boerder_r f_color_1">是否支持退款</el-col>
                        <el-col :span="9" class="boerder_r f_color_2">{{(infoData['updateBefore']&&infoData['updateBefore']['refundStatus']==1 ? '是' : (infoData['updateBefore']['refundStatus']==0 ? '否' : '-')) }}</el-col>
                        <el-col :span="9" class="f_color_2">{{(infoData['updateAfter']&&infoData['updateAfter']['refundStatus']==1 ? '是' : (infoData['updateAfter']['refundStatus']==0 ? '否' : '-')) }}</el-col>
                    </el-row>
                    <!-- <el-row class="h_48 boerder_b">
                        <el-col :span="6" class="boerder_r f_color_1">是否物业配送</el-col>
                        <el-col :span="9" class="boerder_r f_color_2">{{infoData['updateBefore']&&(infoData['updateBefore']['propertyStatus']==1 ? '是' : (infoData['updateBefore']['propertyStatus']==0 ? '否' : '-')) }}</el-col>
                        <el-col :span="9" class="f_color_2">{{infoData['updateAfter']&&(infoData['updateAfter']['propertyStatus']==1 ? '是' : (infoData['updateAfter']['propertyStatus']==0 ? '否' : '-')) }}</el-col>
                    </el-row> -->
                    <el-row class="h_48 boerder_b">
                        <el-col :span="6" class="boerder_r f_color_1">核销方式</el-col>
                        <el-col :span="9" class="boerder_r f_color_2">{{infoData['updateBefore']&&returnName(infoData['updateBefore']['verification'], selectVerifyMethod.options) || infoData['updateBefore']['verification'] || '-'}}</el-col>
                        <el-col :span="9" class="f_color_2">{{infoData['updateAfter']&&returnName(infoData['updateAfter']['verification'], selectVerifyMethod.options) || infoData['updateAfter']['verification'] || '-' }}</el-col>
                    </el-row>
                    <el-row class="h_48 boerder_b">
                        <el-col :span="6" class="boerder_r f_color_1">总库存</el-col>
                        <el-col :span="9" class="boerder_r f_color_2">{{ infoData['updateBefore']&&infoData['updateBefore']['productStock'] ? infoData['updateBefore']['productStock']+'件' : ( infoData['updateBefore']['productStock']==0?infoData['updateBefore']['productStock']:  '无限制') }}</el-col>
                        <!-- <el-col :span="9" class="f_color_2">{{infoData['updateAfter']&&infoData['updateAfter']['productStock'] ? infoData['updateAfter']['productStock']+'件' : '无限制'}}</el-col> -->
                        <el-col :span="9" class="f_color_2">{{ infoData['updateAfter']&&infoData['updateAfter']['productStock'] ? infoData['updateAfter']['productStock']+'件' : ( infoData['updateAfter']['productStock']==0?infoData['updateAfter']['productStock']:  '无限制') }}</el-col>
                    </el-row>
                    <el-row class="h_48 boerder_b">
                        <el-col :span="6" class="boerder_r f_color_1">活动时间</el-col>
                        <el-col :span="9" class="boerder_r f_color_2">{{infoData['updateBefore']&&infoData['updateBefore']['activityTime'] || '-'}}</el-col>
                        <el-col :span="9" class="f_color_2">{{infoData['updateAfter']&&infoData['updateAfter']['activityTime'] || '-'}}</el-col>
                    </el-row>
                    <el-row class="h_48">
                        <el-col :span="6" class="boerder_r f_color_1">发布状态</el-col>
                        <el-col :span="9" class="boerder_r f_color_2">{{infoData['updateBefore']&&returnName(infoData['updateBefore']['releaseStatus'], selectPublishStatus.options) || infoData['updateBefore']['releaseStatus'] || '-'}}</el-col>
                        <el-col :span="9" class="f_color_2">{{infoData['updateAfter']&&returnName(infoData['updateAfter']['releaseStatus'], selectPublishStatus.options) || infoData['updateAfter']['releaseStatus'] || '-'}}</el-col>
                    </el-row>
                </div>
           </div>
        </EdDialog>
    </Page>
</template>

<script>
import Page from '../../components/Page.vue'
import PageCard from 'src/views/components/PageCard.vue'
import ApiTable from 'src/components/ApiTable.vue'
import EdSelect from 'src/components/EdSelect.vue'
import EdDateTimeRange from 'src/components/EdDateTimeRange.vue'
import EdDateTimePickerRange from 'src/components/EdDateTimePickerRange.vue'
import EdDialog from 'src/components/EdDialog.vue';
import { defineComponent } from 'vue'
import { logList, logInfo, getResourceType } from "./api";
import { returnName } from "src/utils/common.js";
import { getDictByCode } from "src/api/dictionaries";
export default defineComponent({
    name: 'member',
    components: { Page, PageCard, ApiTable, EdSelect, EdDateTimeRange, EdDialog, EdDateTimePickerRange },
    data() {
        return {
            queryForm: {
                loginUser: '',
                productNo: '',
                productName: '',
                operation: '',
                pickerTime: '',
                startTime: '',
                endTime: '',
            },
            pickerRangeParams:{
                valueFormat:"yyyy-MM-dd HH:mm"
            },
            selectOperateType: {
                placeholder:"请选择操作类型",
                options: [
                    { value: '删除操作', label: '删除操作' },
                    { value: '添加商品', label: '添加商品' },
                    { value: '修改操作', label: '修改操作' },
                    { value: '发布操作', label: '发布操作' },
                    { value: '下线操作', label: '下线操作' },
                ],
                // props: { value: '', label: '' },
            },
            selectGoodsType:{
                placeholder:"请选择商品类别",
                options: [
                    { value: '1', label: '物业费折扣券' },
                    { value: '2', label: '母婴' },
                ],
                // props: { value: '', label: '' },
            },
            selectSource:{
                placeholder:"请选择来源",
                options: [
                    // { value: '1', label: '轻喜到家' },
                    // { value: '2', label: '天仙配' },
                    // { value: '3', label: '卡券平台' },
                ],
            },
            //
            // 是否支持退款
            selectCanRefund:{
                options: [{
                    value: '1',
                    label: '是'
                }, {
                    value: '0',
                    label: '否'
                }],
            },
            //  是否物业配送
            selectCanSend:{
                options: [{
                    value: '1',
                    label: '是'
                }, {
                    value: '0',
                    label: '否'
                }],
            },
            selectPublishStatus:{
                options: [{
                    value: '0',
                    label: '待处理'
                }, {
                    value: '1',
                    label: '已发布'
                }, {
                    value: '2',
                    label: '未发布'
                }]
            },
            // 查看
            infoVisible: false,
            // currentRow: null,
            infoData: {
                loginUser: '',
                loginAccount: '',
                updateTime: '',
                updateBefore: {},
                updateAfter: {},
            },
            selectVerifyMethod:{
                placeholder:"请选择核销方式",
                options: [],
            },
        }
    },
    activated(){
        // 来源
        getDictByCode('product_source').then(res=>{
            this.selectSource.options = res.data.items;
        })
        // 商品类别
        getResourceType({pageSize: 999999}).then(res=>{
            this.selectGoodsType.options = res.data;
        })
        // 核销方式
        getDictByCode('product_verify_method').then(res=>{
            this.selectVerifyMethod.options = res.data.items;
        })
        this.$nextTick(() => {
            this.$refs.table.load(1);
        })
    },
    methods: {
        tableApi: logList,
        search(){
            // delete this.queryForm['pickerTime'];
            this.$refs.table.load(1)
        },
        reset(){
            this.queryForm = {
                loginUser: '',
                productNo: '',
                productName: '',
                operation: '',
                pickerTime: '',
                startTime: '',
                endTime: '',
            }
            // this.$refs.timeRange.reset();
            this.$nextTick(() => {
                this.$refs.table.load(1, 10);
            })
        },
        returnName(val, options, value, label){
            return returnName(val, options, value, label)
        },
        emitEchoTimeDate(data){
            // $event 子组件$emit传的参数 
            this.queryForm['startTime'] = data.startTime;
            this.queryForm['endTime'] = data.endTime;
        },
        // 查看
        see(row){
            // this.currentRow = row;
            logInfo({id:row.id}).then(response => {
                    // console.log('res--->', response)
                    if(response.success == true) {
                        this.infoData = {
                            loginUser: response.data.loginUser,
                            loginAccount: response.data.loginAccount,
                            updateTime: response.data.updateTime,
                            updateBefore: response.data.updateBefore&&JSON.parse(response.data.updateBefore),
                            updateAfter: response.data.updateAfter&&JSON.parse(response.data.updateAfter),
                        };
                        console.log('res--->', this.infoData)
                        this.infoVisible = true;
                    }
                })
        },
        infoClose(){
            this.infoVisible = false;
        },
        infoSave(){},
        formatter(row, column, cellValue, index){
            return cellValue || '-'
        }
    }
})
</script>

<style scoped lang="scss">
    :deep .infoDialog{
        .el-dialog__body{
            // padding-left: 75px;
            .title{
                display: flex;
                justify-content: space-between;
                font-size: 14px;
                color: #606266;
            }
            .table_box{
                margin-top: 20px;
                font-size: 14px;
                color: #909399;
                border: 1px solid #F4F4F4;
                border-radius: 4px;
                min-height: 200px;
                .el-col{
                    display: flex;
                    justify-content: start;
                    padding-left: 15px;
                    align-items: center;
                    height: 100%;
                }
                .h_48{
                    height: 48px;
                }
                .boerder_b{
                    border-bottom: 1px solid #e7eaef;
                }
                .boerder_r{
                    border-right: 1px solid #e7eaef;
                }
                .row_first{
                    background: #F4F4F4;
                }
                .f_color_1{
                    color: #909399;
                }
                .f_color_2{
                    color: #606266;
                }
            }
        }
    }
</style>